JavaScript Object.assign vs laialisulatus: Jõudluse võrdlus ja kasutusjuhud

JavaScriptis on objektidega manipuleerimine tavaline ülesanne. Kaks populaarset meetodit selle saavutamiseks on Object.assign() ja laialilaotamise süntaks (...). Kuigi mõlemat saab kasutada omaduste kopeerimiseks ühest või mitmest objektist sihtobjekti, erinevad need jõudluse, kasutusjuhtude ja üldise käitumise poolest. See artikkel pakub põhjalikku võrdlust, mis aitab teil valida töö jaoks õige vahendi.

Object.assign() mõistmine

Object.assign() on meetod, mis kopeerib kõigi loendatavate omatud omaduste väärtused ühest või mitmest lähteobjektist sihtobjekti. See tagastab muudetud sihtobjekti.

Süntaks:

            Object.assign(target, ...sources)
            

              
                Copy
              
            
          

Näide:

            const target = { a: 1 };
const source = { b: 2, c: 3 };

const returnedTarget = Object.assign(target, source);

console.log(target); // { a: 1, b: 2, c: 3 }
console.log(returnedTarget === target); // true

            

              
                Copy
              
            
          

Selles näites kopeeritakse omadused b ja c source objektist target objekti. Object.assign() muudab algset target objekti ja tagastab selle.

Laialilaotamise süntaksi mõistmine

Laialilaotamise süntaks (...) võimaldab itereeritava, näiteks massiivi või objekti, laiali laotada kohtades, kus oodatakse nulli või enamat argumenti (funktsioonikutsetes), elementi (massiiviliteralites) või võtme-väärtuse paare (objektiliteraalides).

Süntaks (objektiliteraal):

            const newObject = { ...object1, ...object2 };
            

              
                Copy
              
            
          

Näide:

            const obj1 = { a: 1 };
const obj2 = { b: 2, c: 3 };

const mergedObj = { ...obj1, ...obj2 };

console.log(mergedObj); // { a: 1, b: 2, c: 3 }

            

              
                Copy
              
            
          

Siin loob laialilaotamise süntaks uue objekti mergedObj, kombineerides obj1 ja obj2 omadusi.

Jõudluse võrdlus

Jõudluse erinevus Object.assign() ja laialilaotamise süntaksi vahel võib varieeruda sõltuvalt JavaScripti mootorist ja manipuleeritavate objektide keerukusest. Üldiselt on lihtsate objektide kloonimisel ja ühendamisel laialilaotamise süntaks veidi kiirem. Siiski on see erinevus väikeste objektide puhul sageli tühine. Suuremate objektide, keerukamate stsenaariumide ja korduvate toimingute puhul on soovitatav teha mikrovõrdlusteste, et määrata kindlaks teie konkreetse kasutusjuhu jaoks kiireim lähenemisviis. Vaatleme erinevaid stsenaariume:

Stsenaarium 1: Lihtne objekti kloonimine

Ühe objekti kloonimisel näitab laialilaotamise süntaks üldiselt paremat jõudlust tänu oma sujuvamale toimimisele.

            const original = { a: 1, b: 2, c: 3 };

// Spread Syntax
const cloneSpread = { ...original };

// Object.assign()
const cloneAssign = Object.assign({}, original);

            

              
                Copy
              
            
          

Stsenaarium 2: Mitme objekti ühendamine

Mitme objekti ühendamisel on kahe meetodi jõudluse erinevus sageli minimaalne, kuid laialilaotamise süntaksil on tihti väike eelis, peamiselt seetõttu, et see on kaasaegsetes JavaScripti mootorites natiivselt implementeeritud.

            const obj1 = { a: 1 };
const obj2 = { b: 2 };
const obj3 = { c: 3 };

// Spread Syntax
const mergedSpread = { ...obj1, ...obj2, ...obj3 };

// Object.assign()
const mergedAssign = Object.assign({}, obj1, obj2, obj3);

            

              
                Copy
              
            
          

Stsenaarium 3: Suured objektid paljude omadustega

Sadu või tuhandeid omadusi sisaldavate suurte objektidega tegelemisel võivad jõudluse erinevused muutuda märgatavamaks. Nendel juhtudel säilitab laialilaotamise süntaks sageli oma eelise tänu tõhusamale mälueraldusele ja omaduste kopeerimisele mootori sees.

Jõudluse testimine

Täpsete jõudlusmõõtmiste saamiseks kaaluge jõudluse testimise tööriistade, nagu Benchmark.js, kasutamist. Need tööriistad võimaldavad teil käivitada korduvaid teste ja koguda statistikat, et teha kindlaks, milline meetod toimib konkreetsetes tingimustes kõige paremini.

Näide Benchmark.js kasutamisega:

            const Benchmark = require('benchmark');

const suite = new Benchmark.Suite;

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const obj3 = { c: 3 };

// lisa testid
suite.add('Spread Syntax', function() {
  const mergedSpread = { ...obj1, ...obj2, ...obj3 };
})
.add('Object.assign()', function() {
  const mergedAssign = Object.assign({}, obj1, obj2, obj3);
})
// lisa kuulajad
.on('cycle', function(event) {
  console.log(String(event.target));
})
.on('complete', function() {
  console.log('Fastest is ' + this.filter('fastest').map('name'));
})
// käivita asünkroonselt
.run({ 'async': true });

            

              
                Copy
              
            
          

See koodilõik demonstreerib, kuidas seadistada jõudlustesti Benchmark.js abil, et võrrelda laialilaotamise süntaksi ja Object.assign() jõudlust mitme objekti ühendamisel. Ärge unustage enne skripti käivitamist teeki installida, kasutades käsku npm install benchmark.

Kasutusjuhud

Kuigi jõudlus on oluline tegur, sõltub valik Object.assign() ja laialilaotamise süntaksi vahel sageli konkreetsest kasutusjuhust ja kodeerimisstiili eelistustest.

Object.assign() kasutusjuhud

• Sihtobjekti muutmine: Object.assign() muudab sihtobjekti otse, mis võib olla kasulik, kui soovite olemasolevat objekti kohapeal värskendada.
• Ühilduvus vanemate brauseritega: Object.assign()-l on laiem brauseritugi võrreldes laialilaotamise süntaksiga, mis teeb selle sobivaks vanemaid keskkondi sihtivate projektide jaoks. Vanemate brauserite jaoks võib vaja minna polüfilli.
• Integreerimine olemasolevate koodibaasidega: Kui töötate olemasoleva koodibaasiga, mis kasutab laialdaselt Object.assign(), siis sellega jätkamine aitab säilitada järjepidevust ja vähendada vigade tekkimise ohtu.
• Vaikimisi väärtuste seadmine: Seda saab kasutada objektile vaikimisi väärtuste rakendamiseks, tagades, et teatud omadused on alati määratletud.

              const defaults = { a: 1, b: 2, c: 3 };
  const options = { a: 10, d: 4 };
  
  const config = Object.assign({}, defaults, options);
  console.log(config); // { a: 10, b: 2, c: 3, d: 4 }
  
              
  
                
                  Copy
                
              
            

Laialilaotamise süntaksi kasutusjuhud

• Uute objektide loomine: Laialilaotamise süntaks on suurepärane uute objektide loomiseks ilma algseid objekte muutmata, edendades seeläbi muutumatust.
• Lühike süntaks: Laialilaotamise süntaksi tulemuseks on sageli loetavam ja lühem kood, eriti mitme objekti ühendamisel.
• React ja Redux: Reactis ja Reduxis, kus muutumatus on jõudluse ja olekuhalduse jaoks ülioluline, kasutatakse laialilaotamise süntaksit laialdaselt olekuobjektide uuendatud versioonide loomiseks.
• Funktsionaalne programmeerimine: See sobib hästi kokku funktsionaalse programmeerimise põhimõtetega, kus julgustatakse vältima kõrvalmõjusid ja töötama muutumatute andmetega.

Pinnapealne vs. sügavkoopia

On ülioluline mõista, et nii Object.assign() kui ka laialilaotamise süntaks teevad pinnapealse koopia. See tähendab, et kui objekt sisaldab pesastatud objekte, kopeeritakse ainult viited nendele pesastatud objektidele, mitte pesastatud objektid ise. Pesastatud objekti muutmine kopeeritud objektis mõjutab ka algset objekti ja vastupidi.

Näide:

            const original = {
  a: 1,
  b: { c: 2 }
};

const copied = { ...original };

copied.b.c = 3;

console.log(original.b.c); // 3 - Algne objekt on muudetud!

            

              
                Copy
              
            
          

Kui teil on vaja luua sügavkoopia, kus kopeeritakse ka pesastatud objektid, saate kasutada selliseid tehnikaid nagu:

• JSON.parse(JSON.stringify(object)): See on lihtne, kuid potentsiaalselt ebaefektiivne lähenemisviis, eriti suurte või keerukate objektide puhul. Samuti ei käsitle see korrektselt funktsioone ega ringviiteid.
• Teegi, näiteks Lodashi _.cloneDeep(), kasutamine: Teegid nagu Lodash pakuvad optimeeritud sügavkoopia funktsioone, mis käsitlevad erinevaid erijuhtumeid.
• Kohandatud rekursiivse sügavkoopia funktsiooni kirjutamine: See võimaldab teil kontrollida kloonimisprotsessi ja käsitleda spetsiifilisi andmetüüpe või struktuure.

Muutumatus

Muutumatus on programmeerimiskontseptsioon, mis rõhutab uute andmestruktuuride loomist olemasolevate muutmise asemel. See lähenemine võib viia prognoositavama koodini, lihtsama silumiseni ja parema jõudluseni teatud stsenaariumides. Nii Object.assign() kui ka laialilaotamise süntaksit saab kasutada muutumatuse edendamiseks, kuid laialilaotamise süntaksit eelistatakse üldiselt selle võime tõttu luua uusi objekte otsemalt.

Object.assign() kasutamine muutumatuse saavutamiseks nõuab esmalt uue sihtobjekti loomist:

            const original = { a: 1, b: 2 };
const updated = Object.assign({}, original, { a: 10 });

console.log(original); // { a: 1, b: 2 }
console.log(updated);  // { a: 10, b: 2 }

            

              
                Copy
              
            
          

            const original = { a: 1, b: 2 };
const updated = { ...original, a: 10 };

console.log(original); // { a: 1, b: 2 }
console.log(updated);  // { a: 10, b: 2 }

            

              
                Copy
              
            
          

Praktilised näited

Näide 1: Kasutajaprofiili andmete uuendamine

Kujutage ette, et teil on kasutajaprofiili objekt ja soovite seda uuendada vormist saadud uue teabega. Laialilaotamise süntaksi abil saate hõlpsalt luua uue objekti uuendatud andmetega:

            const userProfile = {
  id: 123,
  name: 'Alice',
  email: 'alice@example.com',
  location: 'New York'
};

const updatedData = {
  email: 'alice.new@example.com',
  location: 'London'
};

const updatedProfile = { ...userProfile, ...updatedData };

console.log(updatedProfile);
// {
//   id: 123,
//   name: 'Alice',
//   email: 'alice.new@example.com',
//   location: 'London'
// }

            

              
                Copy
              
            
          

Näide 2: Ostukorvi kaupade haldamine

E-kaubanduse rakenduses võib teil olla vaja ostukorvis oleva kauba kogust uuendada. Laialilaotamise süntaksi abil saate luua uue ostukorvi massiivi uuendatud kaubaga:

            const cart = [
  { id: 1, name: 'Product A', quantity: 2 },
  { id: 2, name: 'Product B', quantity: 1 }
];

const productIdToUpdate = 1;
const newQuantity = 3;

const updatedCart = cart.map(item =>
  item.id === productIdToUpdate ? { ...item, quantity: newQuantity } : item
);

console.log(updatedCart);
// [
//   { id: 1, name: 'Product A', quantity: 3 },
//   { id: 2, name: 'Product B', quantity: 1 }
// ]

            

              
                Copy
              
            
          

Näide 3: Rakenduse seadete konfigureerimine

Rakenduse seadete konfigureerimisel võite soovida ühendada vaikesätted kasutaja antud sätetega. Object.assign() võib selleks otstarbeks kasulik olla, eriti kui teil on vaja vaikesätete objekti otse muuta:

            const defaultSettings = {
  theme: 'light',
  fontSize: 'medium',
  language: 'en'
};

const userSettings = {
  theme: 'dark',
  fontSize: 'large'
};

Object.assign(defaultSettings, userSettings);

console.log(defaultSettings);
// {
//   theme: 'dark',
//   fontSize: 'large',
//   language: 'en'
// }

            

              
                Copy
              
            
          

Sel juhul muudetakse vaikesätteid kohapeal, mis võib olla või mitte olla soovitav, sõltuvalt teie rakenduse nõuetest.

Parimad praktikad

• Mõistke pinnapealset kopeerimist: Olge teadlik, et mõlemad meetodid teevad pinnapealseid koopiaid. Sügavkoopia tegemiseks kasutage sobivaid tehnikaid või teeke.
• Kaaluge muutumatust: Võimaluse korral eelistage laialilaotamise süntaksit uute objektide loomiseks ja muutumatuse edendamiseks.
• Testige jõudlust vajadusel: Jõudluskriitilise koodi puhul testige mõlemat meetodit, et leida oma konkreetse kasutusjuhu jaoks kiireim valik.
• Valige konteksti põhjal: Valige meetod, mis sobib kõige paremini teie kodeerimisstiili, projekti nõuete ja ühilduvusvajadustega.
• Kasutage lintereid ja koodistiili juhendeid: Jõustage Object.assign() ja laialilaotamise süntaksi järjepidev kasutamine linterite ja koodistiili juhendite abil.
• Dokumenteerige oma valikud: Dokumenteerige selgelt oma põhjendused ühe meetodi eelistamisel teisele, eriti keerukates koodibaasides.

Kokkuvõte

Object.assign() ja laialilaotamise süntaks on väärtuslikud tööriistad objektide manipuleerimiseks JavaScriptis. Kuigi laialilaotamise süntaks pakub sageli veidi paremat jõudlust ja edendab muutumatust, jääb Object.assign() asjakohaseks olemasolevate objektide muutmiseks ja ühilduvuse säilitamiseks vanemate keskkondadega. Mõlema meetodi nüansside mõistmine võimaldab teil teha teadlikke otsuseid ning kirjutada tõhusamat ja hooldatavamat koodi.

Arvestades selles artiklis kirjeldatud jõudlusomadusi, kasutusjuhtusid ja parimaid praktikaid, saate tõhusalt kasutada nii Object.assign() kui ka laialilaotamise süntaksit, et täiustada oma JavaScripti arendustöövoogu ja ehitada robustseid ning skaleeritavaid rakendusi ülemaailmsele publikule. Pidage meeles, et alati tuleb esikohale seada koodi selgus ja hooldatavus, optimeerides samal ajal jõudlust, kui see on vajalik. Koodi mikrovõrdlustestimine ja profileerimine aitavad teil tuvastada ka jõudluse kitsaskohti ja teha andmepõhiseid otsuseid selle kohta, millist meetodit konkreetsetes stsenaariumides kasutada.